<!-- 
    复选框组件

    左侧是一个复选框 右侧是复选框的提示
-->
<template>
    <div class="base-component">
        <input type="checkbox">
        <span>{{ text }}</span>
    </div>
</template>

<script setup>
defineProps({
    text: { type: String,  default: '' },
});
</script>

<style scoped lang="less">
.base-component {
    display: flex;
    align-items: center;
    gap: 0.5vw;

    input {
        --size: 1vw;
        width: var(--size);
        height: var(--size);
    }

    .text {
        font-size: 1vw;
    }
}
</style>